<template>
  <div>
    <div style="margin: 20px;"></div>
    <div v-for="(item, index) in reverseData" v-bind:key="index">
      <!-- 对方消息 -->
      <div v-if="item.toUserId == ownId ">
        <el-card shadow="never" style="border:0px">
          <el-row>
            <el-col :span="2">
              <el-avatar :size="30" src="https://portrait.gitee.com/uploads/avatars/user/782/2346565_KiteAB_1593945520.png!avatar60">
              </el-avatar>
            </el-col>
            <el-col :span="22">
              <el-card>
                <p>{{item.messageContent}}</p>
                <span>{{item.createdTime}}</span>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <!-- 自己发的消息 -->
      <div v-else>
        <el-card shadow="never" style="border:0px;">
          <el-row>
            <el-col :span="22">
              <el-card style="background: #80B9F2;color: #fff;">
                <p>{{item.messageContent}}</p>
                <span>{{item.createdTime}}</span>
              </el-card>
            </el-col>
            <el-col :span="2">
              <el-avatar :size="30" style="float: right;"
                src="https://portrait.gitee.com/uploads/avatars/user/782/2346565_KiteAB_1593945520.png!avatar60">
              </el-avatar>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </div>
    <!-- 发送消息窗口 -->
    <div style="margin-bottom: 130px;">
      <el-form label-position="right" label-width="80px" :model="fromValue" ref="fromValue">
        <el-form-item label="发送对象" style="display: none;">
          <el-input v-model="fromValue.toUserId" disabled></el-input>
        </el-form-item>
        <el-form-item label="发送内容">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="fromValue.messageContent">
          </el-input>
        </el-form-item>
        <el-button style="float: right;" type="primary" size="mini" @click="postMessage('fromValue')">发送信息</el-button>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  props: ['toUserId'],
  data () {
    return {
      fromValue: {
        toUserId: '',
        messageContent: '',
      },
      chatMessage: {},
      ownId: ''
    };
  },
  methods: {
    postMessage (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this = this;
          console.log(this.fromValue)
          if (this.fromValue.messageContent.length != 0) {
            this.$axios.post("/message/post", this.fromValue, {
              headers: {
                Authorization: localStorage.getItem("token"),
              },
            }).then((res) => {
              console.log(res)
              this.getMessage(1)
              this.fromValue.messageContent = ""
              if (res.data.code == 200)
                this.$message.success("发送成功")
              else
                this.$message.error("发送失败")
            })
          } else
            this.$message.error("发送内容不能为空")
        }
      })
    },
    getMessage (page) {
      this.$axios.get("/message/getChatMessage/" + this.fromValue.toUserId, {
        headers: {
          Authorization: localStorage.getItem("token"),
        },
      }).then((res) => {
        this.chatMessage = res.data.data.records;
      })
    }
  },
  created () {
    this.fromValue.toUserId = this.toUserId;
    console.log(this.toUserId)
    this.ownId = this.$store.getters.getUser.id;
    this.getMessage(1)
  },
  computed: {
    reverseData: function () {
      var newArr = [];
      for (var i = this.chatMessage.length - 1; i >= 0; i--) {
        newArr[newArr.length] = this.chatMessage[i];
      }
      return newArr;
    }
  }
}
</script>

<style >
/*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
.el-drawer__body {
  overflow: auto;
}

.el-drawer__container ::-webkit-scrollbar {
  display: none;
}
</style>